import { useEffect, useState } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import XzqhHandle from "../../../../../../utils/apis/XzqhHandle";
import { Card ,Form,Button,Input} from "antd";

export default function XzqhLook(){
    const id=useParams()?.id;
    const [xzqhIdDatas,setXzqhIdDatas]=useState();
    const [xzqhDynamicForm, setxzqhDynamicForm] = useState();
    const [form]=Form.useForm();
    const history=useHistory();
    const [componentDisabled, setComponentDisabled] = useState(true);
 
    useEffect(()=>{
        XzqhHandle.xzqhIdDataApi(id).then(resp=>{
            setXzqhIdDatas(resp.data)
            form.setFieldsValue({
                ...resp.data
            })
        })
    },[id,form])
    useEffect(() => {
        XzqhHandle.xzqhEditDynamicApi().then(datas => {
            setxzqhDynamicForm(datas)
        })
    }, [])
    
    const quxiaoHandle=()=>{
        history.push(`/manager/xzqh`)
    }
    return <div className="layout-h100 fill">
    <Card className="layout-h" >
    <header style={{
      fontSize: 20,
      fontWeight: "bold"
    }}>行政区划查看</header>
    <hr />
        <Form method="post" form={form} 
        style={{
            flex:"flex",
            flexWrap:"wrap",
            height:"1000px"
        }}
        
        >
            <div className="InputForm">
        {xzqhIdDatas !== undefined && xzqhDynamicForm !== undefined && xzqhDynamicForm.map((formItem)=>{
            let node;
            switch (formItem.type){
                case 'header':
                    node=<><header></header></>;
                    break;
                case 'input':
                    default:
                        node=<Input disabled={componentDisabled}
                        style={{
                          width: '90%',
                          fontSize:'15px',
                          color:'#ffffff',
                          fontWeight:'bold',
                        //   backgroundColor:'transparent',
                        //   opacity:'0.8'
                          
                        }}></Input>
            }
            return <div style={{
                flexBasis:"33%",
                marginBottom:"10px"
            }}>
                <Form.Item
                label={formItem.alias}
                name={formItem.name}
                
                >
                    {node}
                </Form.Item>
            </div>
        })}</div>
         <div className="btn-bottom" style={{
        //   marginLeft:'240px'
        }}>
        {/* <Button type="primary"
          
        >上一条</Button>
        <Button type="primary"
          
          >下一条</Button> */}
        <Button onClick={quxiaoHandle} type="primary">返回</Button>
        </div>
        </Form>
    </Card>
</div>
}